<script>
    function new_captcha(){
    var c_currentTime = new Date();
    var c_miliseconds = c_currentTime.getTime();
    document.getElementById('captcha').src = base_url + 'captcha?x=' + c_miliseconds;
}
</script>

<div ng-app="userApp">
    <div class="row">    
        <div id="loginbox" style="margin-top:50px;float:left;" class="mainbox col-md-6 col-md-offset-0 col-sm-8 col-sm-offset-2" ng-controller="loginController">                    
            <div class="panel panel-default" >
                <div class="panel-heading">
                    <div class="panel-title">Đăng nhập</div>                   
                </div>     

                <div style="padding-top:30px" class="panel-body" >

                    <div id="login-alert" class="alert alert-danger col-sm-12"  ng-show="message" ng-model="message">                        
                       {{ message }}
                    </div>
                   
                    <form id="loginForm" name="loginForm" class="form-horizontal" role="form" novalidate>

                        <div class="form-group" ng-class="{ 'has-error' : loginForm.email.$error.required && submitted || submitted && loginForm.$error.email}">
                            <label for="email" class="col-md-3">Email</label>
                             <div class="col-md-9">
                                <input id="login-email" type="email" class="form-control"  name="email" ng-model="login.email" required placeholder="" >       
                                <p ng-show="submitted && loginForm.email.$error.required" class="help-block">Email không được để trống.</p>          
                                <p ng-show="submitted && loginForm.$error.email" class="help-block">Email không hợp lệ.</p>
                            </div>                                                             
                        </div>

                        <div class="form-group" ng-class="{ 'has-error' : loginForm.password.$error.required && submitted || submitted && loginForm.password.$error.minlength || submitted && loginForm.password.$error.invalid}">
                            <label for="password" class="col-md-3">Mật khẩu</label>
                            <div class="col-md-9">
                                <input type="password" class="form-control" name="password" ng-minlength="6" ng-model="login.password" required>
                                <p ng-show="submitted && loginForm.password.$error.required" class="help-block">Mật khẩu không được để trống.</p> 
                                <p ng-show="submitted && loginForm.password.$error.minlength" class="help-block">Mật khẩu quá ngắn (tối thiểu là 6 kí tự).</p>                                
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="password" class="col-md-3"></label>
                            <div class="col-md-5">
                                <div class="checkbox">
                                    <label>
                                        <input id="login-remember" type="checkbox" name="remember" value="0" ng-model="login.remember" ng-value="0"> Ghi nhớ đăng nhập
                                    </label>
                                </div>                            
                            </div>   
                             <div class="col-md-4 pull-right margin-t-8 text-right">
                                <a class="links" href="<?php print base_url() . 'user/forgotpassword';?>">Quên mật khẩu?</a>                
                            </div>   
                        </div>


                            <div style="margin-top:10px" class="form-group">
                                <!-- Button -->

                                <div class="col-sm-12 controls">
                                    <div class="form-group">
                                        <!-- Button -->                                        
                                        <div class="col-md-offset-3 col-md-3">
                                            <button ng-disabled="loadingTracker.active()" data-ng-click="loginProcess(loginForm)" id="btn-signup" type="submit" class="btn btn-info btn-sm" data-style="zoom-in">
                                                <span class="ladda-label">  Đăng nhập </span>                                               
                                            </button>
                                            <span ng-show="loadingTracker.active()" id="ajax-loading" class="ajax-loading margin-5"></span>
                                        </div>
                                        <div class="col-md-6 pull-right">
                                            <div class="form-group">
                                                <a id="btn-fblogin" href="javascript:;" class="btn btn-primary btn-sm login-social" ng-click="loginSocial('user/login_facebook')" data-placement="top" tooltip="Đăng nhập bằng Facebook">Facebook</a>&nbsp;&nbsp;
                                                <a id="btn-fblogin" href="javascript:;" class="btn btn-danger btn-sm social-google login-social" ng-click="loginSocial('user/login_google')" data-placement="top" tooltip="Đăng nhập bằng Google">Google</a>&nbsp;&nbsp;
                                                <a id="btn-fblogin" href="javascript:;" class="btn btn-warning btn-sm login-social" ng-click="loginSocial('user/login_yahoo')" data-placement="top" tooltip="Đăng nhập bằng Yahoo" >Yahoo</a>
                                            </div>                                           
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>   
                </div>                     
            </div>  
        </div>
        <div id="signupbox" style="display:block; margin-top:50px;float: left;" class="mainbox col-md-6 col-md-offset-0 col-sm-8 col-sm-offset-2" ng-controller="signupController">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">Tạo tài khoản mới</div>                   
                </div>  
                <div class="panel-body" >
                    <form id="signupForm" name="signupForm" ng-submit="signupProcess(signupForm)" class="form-horizontal" novalidate>

                        <div class="form-group" ng-class="{ 'has-error' : signupForm.email.$error.required && submitted ||  signupForm.$error.email && submitted ||  signupForm.email.$error.isTaken && submitted }">
                            <label for="email" class="col-md-3">Email</label>
                            <div class="col-md-9">
                                <input type="email" class="form-control" name="email" placeholder="" ng-model="signup.email" required unique-email>
                                <p ng-show="submitted && signupForm.email.$error.required" class="help-block">Email không được để trống.</p>
                                <p ng-show="submitted && signupForm.$error.email" class="help-block">Email không hợp lệ.</p>
                                <p ng-show="submitted && signupForm.$error.isTaken" class="help-block">Email này đã được đăng kí.</p>
                            </div>
                        </div>

                        <div class="form-group" ng-class="{ 'has-error' : signupForm.name.$error.required && submitted}">
                            <label for="name" class="col-md-3">Họ tên</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="name" placeholder="" ng-model="signup.name" required>
                                <p ng-show="submitted && signupForm.name.$error.required" class="help-block">Họ tên không được để trống.</p>
                            </div>
                        </div>
                        
                        <div class="form-group" ng-class="{ 'has-error' : signupForm.password.$error.required && submitted || submitted && signupForm.password.$error.minlength}">
                            <label for="password" class="col-md-3">Mật khẩu</label>
                            <div class="col-md-9">
                                <input type="password" class="form-control" name="password" ng-minlength="6" ng-model="signup.password" required>
                                <p ng-show="submitted && signupForm.password.$error.required" class="help-block">Mật khẩu không được để trống.</p>
                                <p ng-show="submitted && signupForm.password.$error.minlength" class="help-block">Mật khẩu quá ngắn (tối thiểu là 6 kí tự).</p>
                                <p ng-show="submitted && signupForm.password.$error.maxlength" class="help-block">Username is too long.</p>

                            </div>
                        </div>
                        
                        <div class="form-group" ng-class="{ 'has-error' : signupForm.passwordConfirm.$error.required && submitted || submitted && signupForm.passwordConfirm.$error.match}">
                            <label for="passwordConfirm" class="col-md-3">Nhập lại mật khẩu</label>
                            <div class="col-md-9">
                                <input type="password" class="form-control" name="passwordConfirm" ng-model="signup.passwordConfirm" required data-match="signup.password">
                                <p ng-show="submitted && signupForm.passwordConfirm.$error.required" class="help-block">Mật khẩu xác nhận không được để trống.</p>
                                <p ng-show="submitted && signupForm.passwordConfirm.$error.match" class="help-block">Mật khẩu không khớp.</p>
                            </div>
                        </div>

                        <div class="form-group" ng-class="{ 'has-error' : signupForm.verifycode.$error.required && submitted }">
                            <label for="verifycode" class="col-md-3">Mã xác nhận</label>
                            <div class="col-md-5">
                                <input type="text" class="form-control" name="verifycode" placeholder="" ng-model="signup.verifycode" required>
                                <p ng-show="submitted && signupForm.verifycode.$error.required" class="help-block">Mã xác nhận không khớp.</p>
                            </div>
                            <div class="col-md-4">
                                <img border="0"  id="captcha" src="<?php print base_url() . ('captcha'); ?>" alt="">                                
                                <a class="mar-l-5" href="JavaScript: new_captcha();" title="Đổi mã xác nhận">
                                    <i class="glyphicon glyphicon-refresh"></i>
                                </a>
                            </div>                          
                        </div>

                        <div class="form-group">
                            <!-- Button -->                                        
                            <div class="col-md-offset-3 col-md-9">
                                <button ng-disabled="loadingTracker.active()" data-ng-click="signupProcess(signupForm)" id="btn-signup" type="submit" class="btn btn-info">
                                    <i class="icon-hand-right"></i>
                                    &nbsp Đăng kí
                                </button>
                                <span ng-show="loadingTracker.active()" id="ajax-loading" class="ajax-loading margin-9"></span>
                            </div>
                        </div>
                       
                 </div>
            </div>
         </div> 
        <div class="clf"></div>
    </div>
</div>